<template>
	<view class="content">
		<view class="pageTitle">商家入驻</view>
		<view class="j-inpbox">
			<view class="">姓名<text style="color: red;">*</text></view>
			<input class="j-inp" v-model="name" type="text">
		</view>
		<view class="j-inpbox">
			<view class="">电话号码<text style="color: red;">*</text></view>
			<input class="j-inp" v-model="phone" type="number">
		</view>
		<view class="j-inpbox">
			<view class="">门店名称<text style="color: red;">*</text></view>
			<input class="j-inp" v-model="store" type="text">
		</view>
		<view class="j-imgbox">
			<view class="">门店图片<text style="color: red;">*</text></view>
			<view class="imgbox">
				<view class="imgItem" v-for="(item,index) in imgList" :key="index" @click="preview(index,imgList)">
					<image class="i_img" :src="item" mode="aspectFill"></image>
					<image class="delImg" @click.stop="delImg(index,imgList)" src="../../../static/del_icon.png"
						mode="aspectFill"></image>
				</view>
				<image class="i_img" v-if="imgList.length < 6" src="../../../static/addImg.png" @click="chooseImg()"
					mode="aspectFill"></image>
			</view>
		</view>
		<view class="j-inpbox">
			<view class="">门店地址<text style="color: red;">*</text></view>
			<input class="j-inp" v-model="address" type="text">
			<view class="address" @click="chooseLocation()">地图选地</view>
		</view>
		<view class="j-yyzz">
			<view class="">营业执照<text style="color: red;">*</text></view>
			<view class="yz-img">
				<image class="y_img" v-if="Y_Img.length < 1" @click="YImg()" src="../../../static/addImg.png"
					mode="aspectFit"></image>
				<view class="yzImageBox" v-for="(item,index) in Y_Img" :key="index">
					<image class="y_img" :src="Y_Img" mode="widthFix" @click="preview(index,Y_Img)"></image>
					<image class="Y_delImg" @click.stop="delImg(index,Y_Img)" src="../../../static/del_icon.png"
						mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="j-idimg">
			<view class="">身份证<text style="color: red;">*</text></view>
			<view class="imgbox">
				<view class="iditem">
					<image class="i_img" v-if="idCart01.length < 1" @click="idCart001()"
						src="../../../static/addImg.png" mode="widthFix"></image>
					<view class="idcartBox" v-else>
						<image class="i_img" @click="preview(index,idCart01)" :src="idCart01" mode="widthFix"></image>
						<image class="id_delImg" @click.stop="delImg(index,idCart01)" src="../../../static/del_icon.png"
							mode="aspectFill"></image>
					</view>
					<text class="idtext">人像面(正面)</text>
				</view>
				<view class="iditem">
					<image class="i_img" v-if="idCart02.length < 1" @click="idCart002()"
						src="../../../static/addImg.png" mode="widthFix"></image>
					<view class="idcartBox" v-else>
						<image class="i_img" @click="preview(index,idCart02)" :src="idCart02" mode="widthFix"></image>
						<image class="id_delImg" @click.stop="delImg(index,idCart02)" src="../../../static/del_icon.png"
							mode="aspectFill"></image>
					</view>
					<text class="idtext">国徽面(背面)</text>
				</view>
			</view>
		</view>
		<view class="sq-btn" @click="submit()">提交申请</view>
		<view style="text-align: center;font-size: 26rpx;color: #9d9d9d;margin-top: 20rpx;">在7个工作日内我们会电话联系您</view>
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				phone: '',
				store: '',
				address: '',
				imgList: [],
				Y_Img: [],
				idCart01: [],
				idCart02: [],
				storeImg:[],
				check:0
			}
		},
		onLoad()
		{
			let loginstatus = uni.getStorageSync('token');
			if(loginstatus)
			{
				this.check = 1
			}

		},
		methods: {
			chooseLocation() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						that.address = res.name
					}
				});
			},
			// 从相册选择6张图
			chooseImg() {
				let that = this;
				let countLength = 6 - that.imgList.length
				uni.chooseImage({
					count: countLength,
					sizeType: ['original', 'compressed'],
					// sourceType: ['album'],
					success: function(res) {
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							that.imgList.push(res.tempFilePaths[i])
						}
					}
				});
			},
			//选择营业执照
			YImg() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					// sourceType: ['album'],
					success: function(res) {
						that.Y_Img = res.tempFilePaths
					}
				});
			},
			// 预览图片
			preview(index, items) {
				let that = this;
				uni.previewImage({
					urls: items,
					current: index
				});
			},
			// 删除图片
			delImg(index, items) {
				items.splice(index, 1)
			},
			idCart001() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					// sourceType: ['album'],
					success: function(res) {
						that.idCart01 = res.tempFilePaths
					}
				});
			},
			idCart002() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					// sourceType: ['album'],
					success: function(res) {
						that.idCart02 = res.tempFilePaths
					}
				});
			},
			submit() {
				if(this.check)
				{
					let that = this
					if (that.name == '' || that.phone == '' || that.store == '' || that.address == '' || that.imgList.length ==
						0 || that.Y_Img.length == 0 || that.idCart01.length == 0 || that.idCart02.length == 0) {
						uni.showToast({
							icon: 'error',
							title: '请填写完整信息'
						})
					} else {
						uni.showLoading({
							title: '上传中'
						})
						for (var i = 0; i < that.imgList.length; i++) {
							uni.uploadFile({
								url: that.baseUrl + 'common/uploadImg',
								filePath: that.imgList[i],
								name: 'file',
								success: function(res) {
									let date = JSON.parse(res.data)
									let obj = {}
									obj.src=that.baseDomian + date.data.src
									that.storeImg.push(obj)
								}
							})
						}

						for (var i = 0; i < that.Y_Img.length; i++) {
							uni.uploadFile({
								url: that.baseUrl + 'common/uploadImg',
								filePath: that.Y_Img[i],
								name: 'file',
								success: function(res) {
									let date = JSON.parse(res.data)
									that.Y_Img = []
									let obj = {}
									obj.src=that.baseDomian + date.data.src
									that.Y_Img.push(obj)
								}
							})
						}

						for (var i = 0; i < that.idCart01.length; i++) {
							uni.uploadFile({
								url: that.baseUrl + 'common/uploadImg',
								filePath: that.idCart01[i],
								name: 'file',
								success: function(res) {
									let date = JSON.parse(res.data)
									that.idCart01 = []
									let obj = {}
									obj.src=that.baseDomian + date.data.src
									that.idCart01.push(obj)
								}
							})
						}

						for (var i = 0; i < that.idCart02.length; i++) {
							uni.uploadFile({
								url: that.baseUrl + 'common/uploadImg',
								filePath: that.idCart02[i],
								name: 'file',
								success: function(res) {
									let date = JSON.parse(res.data)
									that.idCart02 = []
									let obj = {}
									obj.src=that.baseDomian + date.data.src
									that.idCart02.push(obj)
								}
							})
						}
						
						if (that.imgList.length > 0) {
						setTimeout(function(){that.SbRequest()},2000)
							
						}
					}
				}else{
					uni.showToast({
						title:'请先登录',
						icon:'error'
					})
				}
			},
			SbRequest(){
				let that = this
				that.$ajaxRequest.post(that.baseUrl + 'user/Applyjoin', {
					uid: uni.getStorageSync('UserInfo').id,
					username: uni.getStorageSync('UserInfo').nickname,
					name: that.name,
					phone: that.phone,
					store: that.store,
					address: that.address,
					imgList: JSON.stringify(that.storeImg),
					Y_Img: JSON.stringify(that.Y_Img),
					idCart01: JSON.stringify(that.idCart01),
					idCart02: JSON.stringify(that.idCart02),
				}, false).then((res) => {
					console.log('提交成功', res)
					uni.hideLoading();
					uni.showToast({
						icon:'success',
						title:'提交成功'
					})
					setTimeout(function () {
						uni.navigateBack()
					}, 1000);
					
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFAFA;
	}

	.content {
		width: 95%;
		margin: 0 auto;
		padding-top: 20rpx;
	}

	.pageTitle {
		font-size: 35rpx;
		color: #000000;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.j-inpbox {
		// border: 1px solid red;
		// height: 70rpx;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		color: #9d9d9d;
		border-bottom: 1rpx solid #dedede;

		.j-inp {
			width: 60%;
			margin-left: 20rpx;
			text-align: right;
			color: #000000;
		}

		.address {
			font-size: 25rpx;
		}
	}

	.j-imgbox {
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		color: #9d9d9d;
		border-bottom: 1rpx solid #dedede;

		.imgbox {
			width: 80%;
			display: flex;
			flex-wrap: wrap;

			.imgItem {
				position: relative;

				.delImg {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					top: -15rpx;
					right: -15rpx;
				}
			}

			.i_img {
				margin: 5rpx;
				width: 180rpx;
				height: 180rpx;
			}

		}
	}

	.j-yyzz {
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color: #9d9d9d;
		border-bottom: 1rpx solid #dedede;

		.yz-img {
			margin-left: 20rpx;
			// border: 1px solid red;

			.yzImageBox {
				position: relative;

				.Y_delImg {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					top: -15rpx;
					right: -15rpx;
				}
			}

			.y_img {
				width: 280rpx;
				height: 200rpx;
			}
		}
	}

	.sq-btn {
		width: 70%;
		height: 80rpx;
		border-radius: 50rpx;
		margin: 0 auto;
		text-align: center;
		line-height: 80rpx;
		background-color: #ffc410;
		margin-top: 50rpx;
	}

	.j-idimg {
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		color: #9d9d9d;
		// border-bottom: 1rpx solid #dedede;

		.imgbox {
			width: 80%;
			display: flex;
			flex-wrap: wrap;

			// border: 1px solid red;
			.iditem {
				.i_img {
					margin: 5rpx;
					width: 220rpx;
					height: 180rpx;
					// border: 1px solid red;
				}

				.idcartBox {
					position: relative;

					.id_delImg {
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						top: -15rpx;
						right: -15rpx;
					}
				}

				.idtext {
					display: block;
					text-align: center;
				}
			}

		}
	}
</style>
